<template>
  <div class="source-card-wrapper">
    <h2 class="title">{{source.title}}</h2>

    <div class="source-base-info clearfix">
      <img :src="authorAvatarUrl" alt="avatar">
      <div class="info">
        <h2>{{source.author_name}}</h2>
        <h3>{{formatPublishDate}} - {{source.download_num}}次下载</h3>
      </div>
    </div>

    <div class="source-main">
      <p class="source-intro">{{source.digest}}</p>

      <div class="source-content">
        <div class="downloadImg" @click="downloadSource()">
          <img :src="fileIcon" alt="FILE">
          <div class="hover"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import getFileIcon from '@/utils/getFileIcon.js';

  export default {
    props: {
      source: Object,
      author: Object
    },
    data() {
      return {
      }
    },
    computed: {
      fileIcon() {
        return getFileIcon(this.source.source_name);
      },
      formatPublishDate() {
        return this.$dateUtils.format(this.source.publish_date, 'yyyy-MM-dd');
      },
      authorAvatarUrl() {
        return this.author.avatar
        ? this.$baseURL + this.author.avatar
        : this.$baseURL + this.$defaultAssetUrls.avatar;
      }
    },
    methods: {
      downloadSource() {
        this.$post({
          name: 'download source',
          url: 'source/download',
          data: {
            source_id: this.source.id
          }
        }).then((res) => {
          if(res.data.success) {
            window.open(this.$baseURL + this.source.file);
          } else {
            this.$alert({
              type: 'error',
              content: res.data.message
            })
          }
        }).catch(error => {
          this.$alert({
            type: 'error',
            conten: '下载资源出错了'
          })
        })
      }
    },
  }
</script>

<style lang="less" scoped>
.source-card-wrapper {
  --w: var(--sourceCardWidth);
  --fs: calc(var(--w) / 25);
  padding: 0 var(--fs) calc(var(--fs) * 0.5);
  box-sizing: border-box;
  width: var(--w);
  background-color: white;
  min-height: 500px;
  border-radius: 2px;

  .title {
    font-size: var(--fs);
    color: var(--dark);
    font-weight: bold;
    line-height: 2;
    text-align: center;
  }

  .source-base-info {
    --a: calc(var(--w) * 0.05);
    padding-bottom: calc(var(--a) * 0.4);
    border-bottom: 1px solid var(--gray);

    img, .info {
      float: left;
    }

    img {
      width: var(--a);
      height: var(--a);
      border-radius: 50%;
      overflow: hidden;
    }

    .info {
      margin-left: calc(var(--a) * 0.3);

      h2 {
        line-height: calc(var(--a) * 0.6);
        font-size: calc(var(--a) * 0.4);
        color: var(--dark);
      }

      h3 {
        line-height: calc(var(--a) * 0.4);
        font-size: calc(var(--a) * 0.2);
        color: var(--darkGray);
      }
    }
  }

  .source-main {
    .source-intro {
      padding: calc(var(--fs) * 0.5) 0;
      font-size: calc(var(--fs) * 0.5);
      line-height: 2;
      white-space: pre-wrap;
    }

    .source-content {
      margin-bottom: var(--fs);
      width: 100%;
      --a: calc(var(--w) * 0.2);

      .downloadImg {
        box-sizing: border-box;
        width: calc(var(--a) * 1.2);
        height: calc(var(--a) * 1.2);
        padding: calc(var(--a) * 0.1);

        img {
          width: var(--a);
          height: var(--a);
        }

        &:hover {
          cursor: pointer;
        }

        &:hover .hover {
          display: block;
        }

        .hover {
          display: none;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          border-radius: 5%;
          background-color: var(--gray);
        }
      }
    }
  }
}
</style>